<template>
  <div>
    <div class="home-content">
      <div class="container">
        <div class="top-box">
          <div>
            <vue-seamless-scroll :data="listData" :class-option="classOption" id="warp" class="warp">
              <ul class="ul-item">
                <li class="li-item" v-for="(item, index) in listData" :key="index">
                  {{ item }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
          <div @click="getTo" style="cursor: pointer; position: relative; right: -108rem; top: -3rem; /* float: right; */ margin-right: 2rem; font-size: 1.5rem; color: rgb(64, 170, 255)">
            一图总览模式 ></div>
        </div>
        <div class="bottom-box">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <!-- <el-tab-pane label="进水监测" name="first">
              <InfluentMonitoring :boxArray="boxArray" :goinList="goinList" @showModal="showModal"></InfluentMonitoring>
            </el-tab-pane> -->
            <el-tab-pane label="鱼池监测" name="third">
              <div class="btns" style="margin-left: 2rem; align-items: center; padding-top: 1rem; margin-bottom: -1rem">
                <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
                  <el-form-item label="">
                    <el-cascader v-model="searchForm.companyId" placeholder="请选择公司名称" :options="companyArray" :props="{
                      checkStrictly: true,
                      value: 'id',
                      label: 'name',
                      children: 'childList'
                    }" @change="changeTreeItem" clearable></el-cascader>
                  </el-form-item>
                  <el-form-item label="">
                    <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" clearable>
                      <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="">
                    <el-select v-model="searchForm.boxName" placeholder="请选择控制箱名称" clearable @change="changeboxName">
                      <el-option v-for="item in FishpondDevicesList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                    <!-- <el-input
                      maxlength="50"
                      placeholder="请输入控制箱名称"
                      v-model="searchForm.boxName"
                      style="width: 150px"
                      clearable
                    ></el-input> -->
                  </el-form-item>
                  <el-form-item>
                    <div v-allow="'030102'" class="search-btn" @click="onSubmit"></div>
                  </el-form-item>
                  <el-form-item>
                    <div v-allow="'030102'" class="reset-btn" @click="resetForm"></div>
                  </el-form-item>
                </el-form>
              </div>
              <div v-for="(item, index) in FishpondDevicesList " :key="index" style="margin-top: 1rem">
                <div class="top_box">
                  <div style="position: relative; cursor: pointer">
                    <div style="position: absolute; color: #e0ebf6; top: 2rem; left: 0.3rem; font-size: 1.15rem; font-weight: bold">
                      {{ item.name.slice(0, 3) }}
                    </div>
                    <img style="height: 13rem" src="@/assets/home/kzx.png" alt="" />
                  </div>
                  <div style="width: 100%">
                    <div style="display: flex; justify-content: space-between">
                      <div class="title" style="margin-left: 3rem; font-size: 2rem; font-weight: bold">
                      </div>
                      <!-- 正常过高过低样式 -->
                      <div style="display: flex; margin-right: 2rem;margin-top: 1rem;">
                        <img style="width: 90%" src="@/assets/home/status.png" alt="" />
                      </div>
                    </div>

                    <div class="box">
                      <div class="item_box" :style="{ border: item.deviceStatus == 0 ? '2px solid #dbdbdb' : item.alarmStatus == 0 ? `2px solid #9dd0fd` : `2px solid #fbc8b3`, boxShadow: item.deviceStatus == 0 ? '1px 1px 4px 5px rgba(219, 219, 219, 0.6)' : item.alarmStatus == 0 ? `1px 1px 4px 5px rgba(215, 234, 251, 0.6)` : `1px 1px 4px 5px rgba(251, 200, 179, 0.6)`, }" v-for="(item, index) in                  item.devices                 "
                        style="position: relative; text-align: center; font-size: 1.7rem; border-radius: 3px; margin-left: 2rem; width: 13rem; height: 6rem; box-shadow: 1px 1px 4px 5px rgba(215, 234, 251, 0.6); border: 2px solid #9dd0fd; margin-top: 2rem" :key="index">
                        <div>
                          <i @click="showModal(item)" class="el-icon-s-data" style="color: #e2e2e4; position: absolute; right: 0.3rem; bottom: 0; cursor: pointer; font-size: 1.3rem">
                          </i>
                        </div>
                        <img src="" alt="" />
                        <div style="margin-bottom: 2rem; align-items: center; line-height: 1rem">
                          <div :style="{ color: item.deviceStatus == 0 ? '#dbdbdb' : item.alarmStatus == 0 ? `#0386ff` : `#fbc8b3` }" style="margin-bottom: 0.7rem; margin-top: -1rem; color: #0386ff; font-weight: bold">
                            {{ item.realDataConvert }}
                            <span style="font-size: 1rem">{{ item.unit }}</span>
                          </div>
                          <div style="font-size: 1.3rem">
                            {{ item.deviceName }}
                          </div>
                          <div style="font-size: 1.3rem;padding-top: 0.7rem;">
                            {{ item.collectDate | dateTimeFormat }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="bottom_fishbox_">
                  <div>
                    <img style="height: 13rem" src="@/assets/home/fish1.png" alt="" />
                  </div>

                  <div class="a" style="width: 100%; position: relative">
                    <div @click="stopAll(item)" style="position: absolute; right: 2rem; font-size: 1.2em; font-weight: bold; cursor: pointer">
                      一键启停
                      <img style="margin-top: -1.5rem; cursor: pointer" src="@/assets/home/open.png" alt="" />
                    </div>
                    <div class="water_box" v-for="( item, index ) in item.valveList " :key="index">
                      <div style="display: flex">
                        <div v-if="item.id !=0" class="water fish_box" @click="openOrWaterCloseSwitch(item)">
                          <img v-if="item.deviceStatus == 1" style="margin-top: 1rem; width: 7rem; margin-left: 2rem" src="@/assets/home/water.png" alt="" />
                          <img v-if="item.deviceStatus == 0 || item.deviceStatus == 2" style="margin-top: 1rem; width: 7rem; margin-left: 2rem" src="@/assets/home/waterclose.png" alt="" />
                          <div style="margin-left: 1rem; margin-bottom: 0rem; align-items: center; line-height: 1rem">
                            <div>
                              <div class="item_name_shuifa" style="font-size: 1rem; font-weight: bold">
                                {{ item.deviceName }}
                              </div>
                            </div>
                            <div class="label" style="margin-bottom: 1rem; text-align: center; margin-top: -1rem; font-size: 2rem">
                              <div v-if="item.deviceStatus == 0" style="display: flex; align-items: center; margin-top: -1rem">
                                <span style="margin-right: 0.5rem; margin-left: 2rem; font-size: 1.7rem">离线</span>
                                <img src="@/assets/box/statusyc.png" alt="" />
                              </div>
                              <div v-if="item.deviceStatus == 1" style="display: flex; align-items: center; margin-top: -1rem">
                                <span style="margin-right: 0.5rem; margin-left: 2rem; font-size: 1.7rem">开启</span>
                                <img src="@/assets/box/statuszc.png" alt="" />
                              </div>
                              <div v-if="item.deviceStatus == 2" style="display: flex; align-items: center; margin-top: -1rem"><span style="margin-right: 0.5rem; margin-left: 2rem; font-size: 1.7rem">关闭</span><img src="@/assets/box/statusyc.png" alt="" /></div>

                              <span style="font-size: 1rem"></span>
                            </div>
                          </div>
                        </div>
                        <div class="fishponds" style="display: flex; min-width: auto; justify-content: space-between; margin-bottom: 2.5rem">
                          <div class="item_box_fish" v-for="(                 item, index                 ) in                  item.fishpondList                 " style="" :key="index">
                            <img style="margin-top: 1rem; width: 8rem; margin-left: 2rem" :src="item.src" alt="" />
                            <div style="margin-bottom: 2rem; align-items: center; line-height: 1rem">
                              <div>
                                <div style="font-size: 1rem; font-weight: bold">
                                  {{ item.value }}
                                </div>
                                <div style="margin-top: 0rem; margin-left: 1rem">
                                  <div style="color: #0085ff; font-weight: bold; margin-top: 1rem; text-align: center; margin-left: -2rem; margin-right: 1rem; display: grid; font-size: 1.3rem; grid-template-columns: 1fr 1fr 1fr">
                                    <div @click="showModal(item)" class="a1" style="font-size: 1.3rem; margin-left: 0.85rem" v-for="(                 item, index                 ) in                  item.numericalList                 " :key="index">
                                      {{ item.realDataConvert == null ? '—' : item.realDataConvert }}
                                      <span style="font-size: 1rem">{{ item.unit }}</span>
                                      <div style="color: black; font-weight: normal; margin-top: 0.5rem; font-size: 1rem">
                                        {{ item.deviceName }}
                                      </div>
                                    </div>
                                  </div>
                                  <div style="margin-top: 3rem; display: grid; justify-content: center; margin-left: 3rem">
                                    <div style="margin-right: 5rem">
                                      <div class="a1" v-reduceExpenditure-button @click="openOrCloseSwitch(item)" style="width: 10rem; height: 3rem">
                                        <img v-if="item.switchList[0].deviceStatus == 1" src="@/assets/home/zc.png" alt="" />
                                        <img style="margin-left: 2.8rem; margin-top: 0.5rem" v-else src="@/assets/home/yc.png" alt="" />
                                      </div>
                                    </div>
                                    <div style="font-size: 1rem; margin-top: 1rem; text-align: center; margin-right: 5.5rem; color: #d3dbe4; font-weight: bold">
                                      <div v-if="item.switchList[0].deviceStatus == 1">{{
                                        item.switchList[0].deviceName.slice(0, -2) }}开启</div>
                                      <div v-else>{{ item.switchList[0].deviceName.slice(0, -2) }}关闭</div>
                                    </div>
                                  </div>
                                  <div class="label" style="font-weight: bold; margin-bottom: 1rem; margin-top: 2.5rem; font-size: 1.3rem; text-align: center; margin-right: 2rem">
                                    编号 {{ item.fishpondName }}
                                    <span style="font-size: 1rem"></span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="尾水监测" name="second">
              <TailWater :boxArray="boxArray" :putOutList="putOutList" @showModal="showModal"></TailWater>
            </el-tab-pane>
            <el-tab-pane label="进水监测" name="seven">
              <tailGas :sewageList="sewageList" @showModal="showModal"></tailGas>
            </el-tab-pane> -->
            <!-- <el-tab-pane label="液氧房" name="six">
              <div class="btns" style="margin-left: 2rem; align-items: center; padding-top: 1rem; margin-bottom: -1rem">
                <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
                  <el-form-item label="">
                    <el-cascader v-model="searchForm.companyId" placeholder="请选择公司名称" :options="companyArray" :props="{
                      checkStrictly: true,
                      value: 'id',
                      label: 'name',
                      children: 'childList'
                    }" @change="changeTreeItem" clearable></el-cascader>
                  </el-form-item>
                  <el-form-item label="">
                    <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" clearable>
                      <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="">
                    <el-select v-model="searchForm.boxId" placeholder="请选择液氧房名称" clearable>
                      <el-option v-for="item in yeyangBoxsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>

                  </el-form-item>
                  <el-form-item>
                    <div v-allow="'030102'" class="search-btn" @click="onSubmit1"></div>
                  </el-form-item>
                  <el-form-item>
                    <div v-allow="'030102'" class="reset-btn" @click="resetForm1"></div>
                  </el-form-item>
                </el-form>
              </div>
              <div v-for="(item, index) in yeyangList " :key="index" style="margin-top: 1rem">
                <div class="top_box">
                  <div style="position: relative; cursor: pointer">
                    <div style="position: absolute; color: #e0ebf6; top: 3.6rem; left: 0.4rem; font-size: 1.15rem; font-weight: bold;width:20px">
                      {{item.name}}
                    </div>
                    <img style="height: 13rem" src="@/assets/home/1.png" alt="" />
                  </div>
                  <div style="width: 100%">
                    <div style="display: flex; justify-content: space-between">
                      <div class="title" style="margin-left: 3rem; font-size: 2rem; font-weight: bold">
                      </div>
                      <div style="display: flex; margin-right: 2rem;margin-top: 1rem;">
                        <img style="width: 90%" src="@/assets/home/status.png" alt="" />
                      </div>
                    </div>

                    <div class="box">
                      <div class="item_box" :style="{ border: item.deviceStatus == 0 ? '2px solid #dbdbdb' : item.alarmStatus == 0 ? `2px solid #9dd0fd` : `2px solid #fbc8b3`, boxShadow: item.deviceStatus == 0 ? '1px 1px 4px 5px rgba(219, 219, 219, 0.6)' : item.alarmStatus == 0 ? `1px 1px 4px 5px rgba(215, 234, 251, 0.6)` : `1px 1px 4px 5px rgba(251, 200, 179, 0.6)`, }" v-for="(item, index) in item.numericalRelations "
                        style="position: relative; text-align: center; font-size: 1.7rem; border-radius: 3px; margin-left: 2rem; width: 13rem; height: 6rem; box-shadow: 1px 1px 4px 5px rgba(215, 234, 251, 0.6); border: 2px solid #9dd0fd; margin-top: 2rem" :key="index">
                        <div>
                          <i @click="showModal(item)" class="el-icon-s-data" style="color: #e2e2e4; position: absolute; right: 0.3rem; bottom: 0; cursor: pointer; font-size: 1.3rem">
                          </i>
                        </div>
                        <img src="" alt="" />
                        <div style="margin-bottom: 2rem; align-items: center; line-height: 1rem">
                          <div :style="{ color: item.deviceStatus == 0 ? '#dbdbdb' : item.alarmStatus == 0 ? `#0386ff` : `#fbc8b3` }" style="margin-bottom: 0.7rem; margin-top: -1rem; color: #0386ff; font-weight: bold">
                            {{ item.realDataConvert }}
                            <span style="font-size: 1rem">{{ item.unit }}</span>
                          </div>
                          <div style="font-size: 1.3rem">
                            {{ item.deviceName }}
                          </div>
                          <div style="font-size: 1.3rem;padding-top: 0.7rem;">
                            {{ item.collectDate | dateTimeFormat }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="bottom_fishbox_">
                  <div>
                    <img style="height: 13rem" src="@/assets/home/bottom.png" alt="" />
                  </div>

                  <div class="a" style="width: 100%; position: relative;display:flex">

                    <div class="water_box" v-for="( item, index ) in item.switchRelations " :key="index">
                      <div style="display: flex">
                        <div class="water fish_box" @click="openOrCloseSwitchYeyang(item)">
                          <img v-if="item.deviceStatus == 1" style="margin-top: 1rem; width: 7rem; margin-left: 2rem" src="@/assets/home/water.png" alt="" />
                          <img v-if="item.deviceStatus == 0 || item.deviceStatus == 2" style="margin-top: 1rem; width: 7rem; margin-left: 2rem" src="@/assets/home/waterclose.png" alt="" />
                          <div style="margin-left: 1rem; margin-bottom: 0rem; align-items: center; line-height: 1rem">
                            <div>
                              <div class="item_name_shuifa" style="font-size: 1rem; font-weight: bold">
                                {{ item.deviceName }}
                              </div>
                            </div>
                            <div class="label" style="margin-bottom: 1rem; text-align: center; margin-top: -1rem; font-size: 2rem">
                              <div v-if="item.deviceStatus == 0" style="display: flex; align-items: center; margin-top: -1rem">
                                <span style="margin-right: 0.5rem; margin-left: 2rem; font-size: 1.7rem">离线</span>
                                <img src="@/assets/box/statusyc.png" alt="" />
                              </div>
                              <div v-if="item.deviceStatus == 1" style="display: flex; align-items: center; margin-top: -1rem">
                                <span style="margin-right: 0.5rem; margin-left: 2rem; font-size: 1.7rem">开启</span>
                                <img src="@/assets/box/statuszc.png" alt="" />
                              </div>
                              <div v-if="item.deviceStatus == 2" style="display: flex; align-items: center; margin-top: -1rem"><span style="margin-right: 0.5rem; margin-left: 2rem; font-size: 1.7rem">关闭</span><img src="@/assets/box/statusyc.png" alt="" /></div>

                              <span style="font-size: 1rem"></span>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane> -->
            <!-- <el-tab-pane label="投料控制分组" name="fouth">
              <FeedControl :batchList="batchList" @showModal="showModal"></FeedControl>
                          </el-tab-pane> -->
            <!-- <el-tab-pane label="机房监控" name="five">
              <machineRoom :machineList="machineList" @showModal="showModal"></machineRoom>
            </el-tab-pane> -->

          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 折线图 -->
    <div class="cover" v-if="modalshow">
      <div class="modal">
        <div class="title">{{ title }}历史数据</div>
        <img @click="closeModal" src="@/assets/images/modalclose.png" class="modalclose" alt="" />
        <div style="display: flex">
          <div class="datebox"></div>
          <div style="position: relative; top: 6.5rem; right: -40rem">
            <el-date-picker @change="changeDate" :picker-options="pickerOptions" v-model="startAndEndTime" align="right" type="datetimerange" value-format='yyyy-MM-dd HH:mm:ss' format='yyyy-MM-dd HH:mm:ss' range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <!-- <el-select @change="changeDate" v-model="dateType" placeholder="请选择">
              <el-option v-for="                 item                  in                  options                 " :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
          </div>
        </div>
        <div class="etitle">{{ title }}历史数据</div>
        <div class="length">
          <div class="litem">
            <img class="modalmax" src="@/assets/images/modalmax.png" />
            <span>最大值</span>
          </div>
          <div class="litem">
            <img class="modalmin" src="@/assets/images/modalmin.png" />
            <span>最小值</span>
          </div>
          <div class="litem">
            <div class="line"></div>
            <span>平均值</span>
          </div>
        </div>
        <div id="echart1" class="echartline"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDataHisSwitchList, getDataDeviceAlarmList, getInWaterTailWaterObjBoxs, getObjBoxFishpondDeviceList, getDataHisDataChart, getTableMonitor, getBoxYeyangDevices, getNewAlarmInfo, getOneMapJinshuis, getBoxs } from '@/api/home'
import { getCompanyInfoTree } from '@/api/company'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { getSysCompanyBases, getObjBoxInfo, getObjBoxFishpondDevices, openOrCloseSwitch } from '@/api/system'
import machineRoom from './components/machineRoom.vue'
import microfilter from './components/microfilter.vue'
import tailGas from './components/tailGas.vue'
import FeedControl from './components/FeedControl.vue'
import InfluentMonitoring from './components/InfluentMonitoring.vue'
import TailWater from './components/TailWater.vue'
import moment from 'moment'
var echarts = require('echarts')
export default {
  components: {
    vueSeamlessScroll,
    machineRoom,
    microfilter,
    tailGas,
    FeedControl,
    InfluentMonitoring,
    TailWater
  },
  // 表格数据
  data() {
    return {
      // 报警字段
      startAndEndTime: '',
      listData: [],
      classOption: {
        limitMoveNum: 2,
        direction: 3
      },
      // 查询字段
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        userType: '',
        companyId: '',
        baseId: '',
        name: '',
        title: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      yeyangList: [],
      modalshow: false,
      recordArray: [],
      alarmArray: [],
      boxArray: [],
      goList: [],
      fishpondArray: [],
      companyArray: [],
      baseArray: [],
      isShowTooltip: true,
      recordCount: 1,

      activeName: 'third',
      //   进水检测中的控制输出抽水模式的数组
      controloutputList: [],
      goinList: [],
      putOutList: [],
      FishpondDevicesList: [],
      yeyangBoxsList: [],
      boxNameList: [],
      timer: '',
      attributeCode: '',
      deviceCode: '',
      dateType: '9',
      title: '',
      options: [
        {
          value: '0',
          label: '最近5分钟'
        },
        {
          value: '1',
          label: '最近10分钟'
        },
        {
          value: '2',
          label: '最近20分钟'
        },
        {
          value: '3',
          label: '最近30分钟'
        },
        {
          value: '4',
          label: '最近1小时'
        },
        {
          value: '5',
          label: '最近2小时'
        },
        {
          value: '6',
          label: '最近4小时'
        },
        {
          value: '7',
          label: '最近6小时'
        },
        {
          value: '8',
          label: '最近12小时'
        },
        {
          value: '9',
          label: '最近1天'
        },
        {
          value: '10',
          label: '最近7天'
        },
        {
          value: '11',
          label: '最近一个月'
        }
      ],
      batchList: [],
      table: {},
      machine: {},
      machineList: [],
      microfilter: {},
      microfilterList: [],
      sewage: {},
      sewageList: [],
      color: '',
      typeif: 1,
      countDown: '',
      countDown_waterValve: '',
      countDown_all: '',
      timeRemaining_waterValve: 10,
      timeRemaining: 10,
      timeRemaining_all: 10,
      AllalarmList: '',
      timerAll: '',
      openIdList: [{ id: '', time: '' }],
      openIdListy: [{ id: '', time: '' }]
    }
  },
  filters: {
    dateTimeFormat(dateTime) {
      if (!dateTime) {
        return dateTime
      }
      return dateTime
    }
  },
  // 初始化加载
  async created() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
    await this.setIntervaly()
    await this.getCompanyInfoTree()
    await this.setInterval()
    await this.getInWaterTailWaterObjBoxs()
    await this.getObjBoxInfo()

    setTimeout(() => {
      this.getNewAlarmInfo()
      this.getTableMonitor()
      this.getBoxYeyangDevices()
      this.boxNameList = this.FishpondDevicesList
    }, 1000)
  },
  //销毁钩子
  beforeDestroy() {
    // // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.timerAll) {
      clearInterval(this.timerAll)
    }
  },

  // 自定义方法
  methods: {
    getNewAlarmInfo() {
      getNewAlarmInfo({ id: this.searchForm.baseId }).then((res) => {
        if (res.code == 200) {
          this.AllalarmList = res.data
          if (res.data.type == 0) {
            if (res.data.boxName == null) {
              this.listData = `报警内容:${res.data.content}`
            } else if (res.data.content == null) {
              this.listData = `控制箱:${res.data.boxName}`
            } else {
              this.listData = `控制箱:${res.data.boxName}\xa0\xa0\xa0报警内容:${res.data.content}`
            }
          }
          if (this.AllalarmList.time !== null) {
            clearInterval(this.timerAll) //报警直接清除定时器
            const h = this.$createElement

            this.color = res.data.data[0].colorType
            this.$msgbox({
              title: '报警提醒',
              message: h('p', null, [
                h('div', { class: 'bgc' }),
                h(
                  'span',
                  {
                    style: 'color: red;font-size:2.5rem;'
                  },
                  `${this.AllalarmList.content}！`
                )
              ]),
              customClass: 'myClass',
              confirmButtonText: '确定'
            })
              .then(() => {
                clearInterval(this.timerAll)
                if (this.AllalarmList.type == 0) {
                  this.$router.push({
                    path: `/home/alarmRecord`
                  })
                }
                if (this.AllalarmList.type == 1) {
                  this.$router.push({
                    path: `/home/serverAlarm`
                  })
                }
                if (this.AllalarmList.type == 2) {
                  this.$router.push({
                    path: `/home/schedulingAlarm`
                  })
                }
              })
              .catch(() => {
                setTimeout(() => {
                  this.setIntervaly()
                }, 1000000)
              })
          }
        }
      })
    },
    // 获取报警信息
    getAlarmList() {
      this.searchForm.pageSize = 1
      getDataDeviceAlarmList(this.searchForm).then((res) => {
        if (res.code == 200) {
          if (res.data.data[0].endDate == null) {
            if (res.data.data[0].fishpondName == null) {
              this.listData = `控制箱:${res.data.data[0].boxName}\xa0\xa0\xa0报警内容:${res.data.data[0].alarmType}`.split('')
              this.color = res.data.data[0].colorType
            } else {
              this.listData = `控制箱:${res.data.data[0].boxName}\xa0\xa0\xa0鱼池编号:${res.data.data[0].fishpondName}\xa0\xa0\xa0报警内容:${res.data.data[0].alarmType}`.split('')
              this.color = res.data.data[0].colorType
            }
            document.getElementById('warp').style.color = this.color
          }
        }
      })
    },
    // change更改时间日期
    changeDate(val) {
      this.startTime = val[0]
      this.endTime = val[1]
      this.getDeviceHisData()
    },
    // 更改时间样式
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    // 历史数据的折线图echarts
    getDeviceHisData() {
      getDataHisDataChart({
        attributeCode: this.attributeCode,
        deviceCode: this.deviceCode,
        startTime: this.startTime,
        endTime: this.endTime,
        mode: 0
      }).then((res) => {
        if (res.data.data.xTimes.length > 0 && res.data.data.yDatas.length > 0) {
          let xdata = [],
            ydata = []
          res.data.data.xTimes.forEach((item) => {
            xdata.push(this.getLocalTime(item))
          })
          res.data.data.yDatas.forEach((item) => {
            ydata.push(item.value)
          })
          // this.title = res.data.data[0].ydatas[0].attributeName;
          this.initLineChart('echart1', xdata, ydata)
        } else {
          this.title = ''
          this.initLineChart('echart1', [], [])
        }
      })
    },
    initLineChart(id, xdata, ydata, markdata) {
      this.chart = echarts.init(document.getElementById(id))

      this.chart.setOption({
        backgroundColor: '',
        color: ['#27CDFF'],
        grid: {
          left: '6%',
          right: '6%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              width: 0.1,
              color: '#9BB7EF'
            }
          },
          //    axisLabel:{
          //         rotate:20,
          //    },
          type: 'category',
          data: xdata
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              width: 0.1,
              color: '#9BB7EF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#F1F2F3'],
              width: 0.1
            }
          }
        },
        series: [
          {
            //   title:'大气温度',
            data: ydata,
            type: 'line',
            smooth: true,
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值',
                  lineStyle: { color: '#00FCF9' }
                }
              ]
            },
            markPoint: {
              itemStyle: { normal: { label: { color: '#FFFFFF' } } },
              data: [
                {
                  type: 'max',
                  name: '最大值',
                  itemStyle: { color: '#FF3A00' }
                },
                {
                  type: 'min',
                  name: '最小值',
                  itemStyle: { color: '#8898A8' }
                }
              ]
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.1,
                  color: 'RGBA(44, 104, 139, 0.6)'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 0)'
                }
              ])
            }
          }
        ]
      })
    },
    time() {
      clearTimeout(this.ttime)
      var dt = new Date()
      var y = dt.getFullYear()
      var mt = dt.getMonth() + 1
      var day = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()
      var h = dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours()
      var m = dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes()
      var s = dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds()
      this.showtime = y + '.' + mt + '.' + day + '  ' + h + ':' + m + ':' + s + '  周' + '日一二三四五六'.charAt(new Date().getDay())
      this.ttime = setTimeout(this.time, 1000)
    },
    // 关闭历史数据model
    closeModal() {
      this.modalshow = false
    },
    // 打开echarts
    showModal(citem) {
      this.title = citem.deviceName
      ;(this.attributeCode = citem.attributeCode),
        (this.deviceCode = citem.deviceCode),
        // this.eid = citem.id;
        (this.modalshow = true)
      this.getDeviceHisData()
    },

    // 一键启停
    stopAll(item) {
      if (this.timeRemaining_all == 10 || this.timeRemaining_all == 0) {
        this.attributeCode = item.aeratorDevice.attributeCode
        this.deviceCode = item.aeratorDevice.deviceCode
        let msg = ''
        if (item.aeratorDevice.deviceStatus == 0) {
          this.$message('增氧机已经离线')
          return
        }
        if (item.aeratorDevice.deviceStatus == 3) {
          this.$message('增氧机出现故障')
          return
        }
        if (item.aeratorDevice.deviceStatus != 0 && item.aeratorDevice.deviceStatus != 3) {
          msg = '请选择是否开启开关?'
        }

        let type = 0
        this.$confirm(`${msg}`, '提示', {
          confirmButtonText: '开启',
          cancelButtonText: '关闭',
          type: 'warning'
        })
          .then(() => {
            openOrCloseSwitch({
              attributeCode: this.attributeCode,
              deviceCode: this.deviceCode,
              status: 1, //this.status,
              type: type
            }).then((res) => {
              if (res.code == 200) {
                this.timeRemaining_all = 10
                this.countDown_all = setInterval(() => {
                  this.timeRemaining_all--
                  if (this.timeRemaining_all === 0) {
                    clearInterval(this.countDown_all)
                  }
                }, 1000)
              }
            })
          })
          .catch((err) => {
            openOrCloseSwitch({
              attributeCode: this.attributeCode,
              deviceCode: this.deviceCode,
              status: 0, //this.status,
              type: type
            }).then((res) => {
              if (res.code == 200) {
                this.timeRemaining_all = 10
                this.countDown_all = setInterval(() => {
                  this.timeRemaining_all--
                  if (this.timeRemaining_all === 0) {
                    clearInterval(this.countDown_all)
                  }
                }, 1000)
              }
            })
          })
      } else {
        this.$message({
          message: `请勿重复点击开关，剩余${this.timeRemaining_all}s`,
          type: 'warning'
        })
      }
    },
    // 选择控制箱直接选择
    changeboxName() {
      this.onSubmit()
    },
    resetForm() {
      ;(this.searchForm.boxName = ''), this.onSubmit()
    },
    resetForm1() {
      this.searchForm.boxId = ''
      this.onSubmit1()
    },
    onSubmit1() {
      this.getBoxYeyangDevices()
    },
    // 查询
    onSubmit() {
      this.getObjBoxFishpondDevices()
    },
    getBoxYeyangDevices() {
      getBoxYeyangDevices(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.yeyangList = res.data
        }
      })
    },
    // 3s一次页面刷新
    setInterval() {
      let that = this
      this.timer = window.setInterval(() => {
        setTimeout(() => {
          that.getObjBoxFishpondDevices() //我们的获取接口数据函数
          that.getObjBoxFishpondDeviceList()
          that.getDataHisSwitchList()
          that.getInWaterTailWaterObjBoxs()
          that.getTableMonitor()
          that.getAlarmList()
          that.getObjBoxInfo()
          that.getBoxYeyangDevices()
        }, 0)
      }, 3000)
    },
    setIntervaly() {
      let that = this
      this.timerAll = window.setInterval(() => {
        setTimeout(() => {
          if (this.baseArray.length != 0) {
            that.getNewAlarmInfo()
          } //我们的获取接口数据函数
        }, 0)
      }, 10000)
    },
    openOrCloseSwitchYeyang(item) {
      console.log(item)
      let timeTrue = true
      this.openIdListy.map((citem, index) => {
        if (citem.id == item.fishpondId) {
          timeTrue = false
          let time = new Date().getTime() - citem.time.getTime()
          time = time / 1000
          if (time >= 10) {
            timeTrue = true
            this.openIdListy.splice(index, 1)
          } else {
            timeTrue = false
            this.timeRemaining = time.toFixed(0)
            return
          }
        }
      })
      setTimeout(() => {
        if (timeTrue) {
          this.attributeCode = item.attributeCode
          this.deviceCode = item.deviceCode
          let msg = ''
          if (item.deviceStatus == 2) {
            this.status = 1
            msg = '确定要开启开关吗, 是否继续?'
          }
          if (item.deviceStatus == 0) {
            this.$message('液氧房已经离线')
            return
          }
          if (item.deviceStatus == 1) {
            this.status = 0
            msg = '确定要关闭开关吗, 是否继续?'
          }
          let type = 0
          this.$confirm(`${msg}`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              let list = {
                id: item.fishpondId,
                time: new Date()
              }
              this.openIdListy.push(list)
              openOrCloseSwitch({
                attributeCode: this.attributeCode,
                deviceCode: this.deviceCode,
                status: this.status,
                type: type
              }).then((res) => {
                if (res.code == 200) {
                  // this.timeRemaining = 10
                  // this.countDown = setInterval(() => {
                  //   this.timeRemaining--
                  //   if (this.timeRemaining === 0) {
                  //     clearInterval(this.countDown)
                  //   }
                  // }, 1000)
                }
              })
            })
            .catch((err) => {
              this.$message({
                type: 'info',
                message: '已取消关闭'
              })
            })
        } else {
          this.$message({
            message: `请勿重复点击开关，剩余${10 - this.timeRemaining}s`,
            type: 'warning'
          })
        }
      }, 200)
    },
    // 控制开关状态
    openOrCloseSwitch(item) {
      let timeTrue = true
      this.openIdListy.map((citem, index) => {
        if (citem.id == item.fishpondId) {
          timeTrue = false
          let time = new Date().getTime() - citem.time.getTime()
          time = time / 1000
          if (time >= 10) {
            timeTrue = true
            this.openIdListy.splice(index, 1)
          } else {
            timeTrue = false
            this.timeRemaining = time.toFixed(0)
            return
          }
        }
      })
      setTimeout(() => {
        if (timeTrue) {
          this.attributeCode = item.switchList[0].attributeCode
          this.deviceCode = item.switchList[0].deviceCode
          let msg = ''
          if (item.switchList[0].deviceStatus == 2) {
            this.status = 1
            msg = '确定要开启开关吗, 是否继续?'
          }
          if (item.switchList[0].deviceStatus == 0) {
            this.$message('增氧机已经离线')
            return
          }
          if (item.switchList[0].deviceStatus == 1) {
            this.status = 0
            msg = '确定要关闭开关吗, 是否继续?'
          }
          let type = 0
          this.$confirm(`${msg}`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              let list = {
                id: item.fishpondId,
                time: new Date()
              }
              this.openIdListy.push(list)
              openOrCloseSwitch({
                attributeCode: this.attributeCode,
                deviceCode: this.deviceCode,
                status: this.status,
                type: type
              }).then((res) => {
                if (res.code == 200) {
                  // this.timeRemaining = 10
                  // this.countDown = setInterval(() => {
                  //   this.timeRemaining--
                  //   if (this.timeRemaining === 0) {
                  //     clearInterval(this.countDown)
                  //   }
                  // }, 1000)
                }
              })
            })
            .catch((err) => {
              this.$message({
                type: 'info',
                message: '已取消关闭'
              })
            })
        } else {
          this.$message({
            message: `请勿重复点击开关，剩余${10 - this.timeRemaining}s`,
            type: 'warning'
          })
        }
      }, 200)
    },
    // 控制水阀开关状态
    openOrWaterCloseSwitch(item) {
      let timeTrue = true
      this.openIdList.map((citem, index) => {
        if (citem.id == item.id) {
          timeTrue = false
          let time = new Date().getTime() - citem.time.getTime()
          time = time / 1000
          if (time >= 10) {
            timeTrue = true
            this.openIdList.splice(index, 1)
          } else {
            timeTrue = false
            this.timeRemaining_waterValve = time.toFixed(0)
            return
          }
        }
      })
      setTimeout(() => {
        if (timeTrue) {
          this.attributeCode = item.attributeCode
          this.deviceCode = item.deviceCode
          let msg = ''
          if (item.deviceStatus == 2) {
            this.status = 1
            msg = '确定要开启水阀开关吗, 是否继续?'
          }
          if (item.deviceStatus == 0) {
            this.$message('水阀已经离线')
            return
          }
          if (item.deviceStatus == 1) {
            this.status = 0
            msg = '确定要关闭水阀开关吗, 是否继续?'
          }
          let type = 0

          this.$confirm(`${msg}`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              let list = {
                id: item.id,
                time: new Date()
              }
              this.openIdList.push(list)
              openOrCloseSwitch({
                attributeCode: this.attributeCode,
                deviceCode: this.deviceCode,
                status: this.status,
                type: type
              }).then((res) => {
                if (res.code == 200) {
                  // this.timeRemaining_waterValve = 10
                  // this.countDown_waterValve = setInterval(() => {
                  //   this.timeRemaining_waterValve--
                  //   if (this.timeRemaining_waterValve === 0) {
                  //     clearInterval(this.countDown_waterValve)
                  //   }
                  // }, 1000)
                }
              })
            })
            .catch((err) => {
              this.$message({
                type: 'info',
                message: '已取消关闭'
              })
            })
        } else {
          this.$message({
            message: `请勿重复点击开关，剩余${10 - this.timeRemaining_waterValve}s`,
            type: 'warning'
          })
        }
      }, 200)
    },
    getObjBoxInfo() {
      let id = 13
      getObjBoxInfo({ id }).then((res) => {
        if (res.code == 200) {
          this.goinList = res.data.boxNumericals
        }
      })
      let a = 14
      getObjBoxInfo({ id: a }).then((res) => {
        if (res.code == 200) {
          this.putOutList = res.data.boxNumericals
        }
      })
    },
    // 开启弹框操作
    open() {
      this.$confirm('确定要开启开关嘛, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    handleClick(tab, event) {},
    getTo() {
      let url = 'http://192.168.88.72:8080/xunyu_iot_map/#/index?companyId=' + this.searchForm.companyId + '&baseId=' + this.searchForm.baseId + '&Authorization=' + window.localStorage.getItem('token')
      // window.open = url;
      window.open(`${url}`, '_blank')
    },
    // 跳转到控制箱
    getbox() {
      let row = {
        code: '20 23 02 21 23 05 19 91 16 00',
        id: '5',
        name: 'SS1控制箱'
      }
      this.$router.push({
        path: `/device/sysBoxDetail?id=` + row.id + '&code=' + row.code + '&name=' + row.name
      })
    },
    // 获取投料数据
    getTableMonitor() {
      this.table.baseId = this.searchForm.baseId
      this.table.tableName = '投料控制分组'
      getTableMonitor(this.table).then((res) => {
        if (res.code == 200) {
          this.batchList = res.data.data
        }
      })
      this.machine.baseId = this.searchForm.baseId
      this.machine.tableName = '机房监控'
      getTableMonitor(this.machine).then((res) => {
        if (res.code == 200) {
          this.machineList = res.data.data
        }
      })

      this.microfilter.baseId = this.searchForm.baseId
      this.microfilter.tableName = '微滤机'
      getTableMonitor(this.microfilter).then((res) => {
        if (res.code == 200) {
          this.microfilterList = res.data.data
        }
      })
      this.sewage.baseId = this.searchForm.baseId
      this.sewage.tableName = '进水监测'
      getOneMapJinshuis(this.sewage).then((res) => {
        if (res.code == 200) {
          this.sewageList = res.data
        }
      })
    },
    getObjBoxFishpondDevices() {
      getObjBoxFishpondDevices(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.FishpondDevicesList = res.data
        }
      })
    },
    getBoxs() {
      let info = {
        baseId: this.searchForm.baseId,
        type: 5
      }
      getBoxs(info).then((res) => {
        if (res.code == 200) {
          this.yeyangBoxsList = res.data
        }
      })
    },
    getDataHisSwitchList() {
      getDataHisSwitchList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.recordArray = res.data.data
        }
      })
    },
    getDataHisAlarmList() {
      getDataHisAlarmList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.alarmArray = res.data
        }
      })
    },
    getInWaterTailWaterObjBoxs() {
      getInWaterTailWaterObjBoxs(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.boxArray = res.data
        }
      })
    },
    getObjBoxFishpondDeviceList() {
      getObjBoxFishpondDeviceList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.fishpondArray = res.data.data
        }
      })
    },
    getCompanyInfoTree() {
      getCompanyInfoTree({ id: 0 }).then((res) => {
        if (res.code == 200) {
          this.companyArray = res.data
          if (res.data.length > 0) {
            this.searchForm.companyId = res.data[0].id
            this.getSysCompanyBases()
          }
        }
      })
    },
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1]
      } else {
        this.searchForm.companyId = ''
      }

      this.searchForm.baseId = ''
      this.baseArray = []

      // 获取基地列表
      this.getSysCompanyBases()
    },
    getSysCompanyBases() {
      if (this.searchForm.companyId === '' || this.searchForm.companyId == null) {
        return
      }
      getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
        if (res.code == 200) {
          this.baseArray = res.data
          if (res.data.length > 0) {
            this.searchForm.baseId = res.data[0].id
            this.getInWaterTailWaterObjBoxs()
            this.getDataHisSwitchList()
            // this.getDataHisAlarmList()
            this.getObjBoxFishpondDeviceList()

            this.getObjBoxFishpondDevices()
            this.getBoxs()
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.right {
  float: right;
  width: 60px;
}

.bottom {
  clear: both;
  text-align: center;
}

.item {
  margin: 4px;
}

.left .el-tooltip__popper,
.right .el-tooltip__popper {
  padding: 8px 10px;
}

// 超出字体样式
.title_out {
  margin-left: 0.5rem;
  width: 11rem;
  height: 2.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item_box_fish {
  width: 24rem;
  height: 15rem;
  background: url('~@/assets/home/bgi.png') no-repeat;
  background-size: contain;
  margin: 1rem;
  margin-top: 5rem;
  // margin-left: 5rem;
  margin-left: 4.5rem;
}

.bottom_fishbox_ {
  display: flex;
  width: 98%;
  background-color: #ffffff;
  // margin-right: 3rem;
  border-radius: 20px;
  align-items: center;
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
  margin: 1rem;
  margin-top: 0rem;
  min-height: 26rem;
  margin-bottom: 3rem;
}

.top_box {
  display: flex;
  width: 98%;
  min-height: 23rem;
  background-color: #ffffff;
  // margin-right: 3rem;
  border-radius: 20px;
  margin: 1rem;
  margin-top: 0rem;
  align-items: center;
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 2rem;
}

.bottom_box_ {
  display: flex;
  width: 98%;
  height: 22rem;
  background-color: #ffffff;
  // margin-right: 3rem;
  border-radius: 20px;
  margin: 1rem;
  margin-top: 0rem;
  align-items: center;
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);

  .bottom_box {
    .left {
      background-color: #f4f8f9;
      box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      width: 40rem;
      height: 15rem;
      margin-bottom: 2rem;
      margin-left: 1rem;

      .title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 2rem;
        margin-top: 1.5rem;
        display: flex;
        align-items: center;

        .square {
          width: 0.5rem;
          height: 1.5rem;
          background-color: #0386ff;
          margin-right: 0.5rem;
        }
      }
    }

    .right {
      background-color: #f4f8f9;
      box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      width: 70rem;
      height: 15rem;
      margin-bottom: 2rem;
      margin-left: 2.5rem;

      .title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 2rem;
        margin-top: 1.5rem;
        display: flex;
        align-items: center;

        .square {
          width: 0.5rem;
          height: 1.5rem;
          background-color: #0386ff;
          margin-right: 0.5rem;
        }
      }
    }
  }
}

.warp {
  width: 100rem !important;
  height: 70px;
  margin: 0 auto;
  overflow: hidden;
  // margin-left: 24rem;
  margin-left: 3rem;
  color: red;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    margin-left: 3rem;
    width: 90rem;

    &.ul-item {
      display: flex;

      .li-item {
        // width: 30px;
        height: 60px;

        line-height: 60px;
        // background-color: #999;
        text-align: center;
        font-size: 40px;
      }
    }
  }
}

.a1 {
  cursor: pointer !important;
}

.fish_box {
  cursor: pointer !important;
}

.box {
  // margin-bottom: 1rem;
  padding-bottom: 2rem;
}

/deep/.active {
  background: #313131 !important;
  color: #a1e024 !important;
  text-shadow: 1px 1px 20px #a1e124;
}

.item_name_shuifa {
  background: linear-gradient(to bottom, #dde7f4, #c8d6e9 70px);
  border-radius: 7px;

  box-shadow: 0px 1px 1px 0.5px rgba(0, 0, 0, 0.6) inset;
  // box-shadow: inset 0rem 0.07rem 0.21rem 0rem rgba(137, 137, 137, 0.5);
  margin-top: 2rem;
  margin-left: 1rem;
  width: 10rem;
  height: 3rem;
  line-height: 3rem;
  color: #000000;
  text-align: center;
  font-size: 1.7rem;
  text-shadow: 1px 1px 20px #bebebe;
}

.item_name {
  background: linear-gradient(to bottom, #dde7f4, #c8d6e9 70px);
  border-radius: 7px;

  box-shadow: 0px 1px 1px 0.5px rgba(0, 0, 0, 0.6) inset;
  // box-shadow: inset 0rem 0.07rem 0.21rem 0rem rgba(137, 137, 137, 0.5);
  margin-top: 2rem;
  margin-left: 1rem;
  width: 12rem;
  line-height: 4rem;
  height: 4rem;
  color: #000000;
  text-align: center;
  font-size: 1.7rem;
  text-shadow: 1px 1px 20px #bebebe;
}

.water {
  margin-top: 5rem !important;
  display: flex;
  width: 24rem;
  border: 2px solid #6d6e6e;
  background-color: #f4f8f9 !important;
  height: 15em !important;
  align-items: center;
  font-weight: bold;
  border-radius: 20px !important;
  margin-left: 5rem !important;

  // border: 2px solid #40aaff !important;
  .label {
    margin-top: 3rem !important;
  }
}

/deep/ .el-tabs__item.is-active {
  border: 2px solid white;
  background-color: #409eff;
  color: white;
}

/*滚动条整体样式*/
::-webkit-scrollbar {
  display: none;
  // width: 4px;
  // height: 10px;
}

// 鼠标移入清除省略号
.hover_title[data-title] {
  position: relative;

  // 样式：
  &:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
  }

  // 背景的样式 位置 字体等
  &:after {
    content: attr(data-title);
    position: absolute;
    padding: 1px 10px;
    left: 60px;
    bottom: -2.8em;
    height: 2rem;
    line-height: 2rem;
    // right: 0.5rem;
    border-radius: 4px;
    color: #fff;
    background-color: rgba(80, 79, 79, 0.8);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
    font-size: 14px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
  }
}

.home-content {
  // min-height: calc(100vh - 90px);
  width: 100%;
  // background: #2A2D3C;

  .container {
    width: 100%;

    .top-box {
      width: 100%;
      height: 7rem;
      padding-left: 1.39rem;
      // padding-top: 1.21rem;
      border-bottom: 5px solid #373b44;
      align-items: center;
      background-color: #f4f8f9;

      .btns {
        display: flex;

        .btn {
          width: 7.07rem;
          height: 2.79rem;
          background-color: #e3e3e5;
          text-align: center;
          line-height: 2.79rem;
          margin-right: 0.85rem;
          border-radius: 0.14rem;
          font-size: 1.29rem;
          color: #333333;
          cursor: pointer;
        }
      }
    }

    .bottom-box {
      min-height: 53.57rem;
      width: 100%;
      display: flex;
      background-color: #f4f8f9;

      .title {
        display: flex;
        margin-top: 1.21rem;
        margin-bottom: 0.57rem;
        align-items: center;
        font-size: 1.43rem;
        font-weight: bold;
        color: #000000;

        .circle {
          width: 5px;
          height: 5px;
          background: #2ce11a;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
    }
  }
}

/deep/.el-tabs__item {
  margin-top: 1rem;
  width: 12rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  font-size: 1.3rem;
  background-color: #fff;
}

/deep/ .el-tabs__item.is-active {
  background-color: #f4f8f9;
  color: #000000;
  border-bottom: none;
  // border-top: 2rem;
  // border-top-width: 0.5rem;
  // border-top: #4192de;
  border-right: none;
  border-top-color: #4192de;
}

.box {
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  .item_title {
    position: relative;
    text-align: center;
    font-size: 2rem;
    border-radius: 3px;
    margin-left: 2rem;
    width: 13rem;
    background-color: #4472c4;
    height: 6rem;
    line-height: 6rem;
    color: #ffffff;
    box-shadow: 1px 1px 4px 5px rgba(215, 234, 251, 0.6);
    border: 2px solid #9dd0fd;
    margin-top: 2rem;
  }

  .item_box {
    position: relative;
    text-align: center;
    font-size: 1.7rem;
    border-radius: 3px;
    margin-left: 2rem;
    width: 15rem !important;
    height: 7.5rem !important;
    box-shadow: 1px 1px 4px 5px rgba(215, 234, 251, 0.6);
    border: 2px solid #9dd0fd;
    margin-top: 2rem;
  }
}

.el-tabs {
  width: 100%;
}

.cover {
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  //   height: 100%;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal {
  width: 52vw;
  height: 34vw;
  background: url('~@/assets/images/modalbox.png') no-repeat;
  // background-color: white;
  background-size: 100% 100%;
  position: relative;

  .echartline {
    width: 100%;
    height: 22vw;
    margin-top: 7.4vw;
    margin-left: 0.5vw;
  }

  .title {
    position: absolute;
    top: 1.82vw;
    left: 2vw;
    color: #ffffff;
    font-size: 1.25vw;
  }

  .etitle {
    position: absolute;
    top: 8.28vw;
    left: 2.13vw;
    color: #ffffff;
    font-size: 0.94vw;
  }

  .length {
    position: absolute;
    top: 8.28vw;
    right: 2.44vw;
    display: flex;
    align-items: center;

    .litem {
      display: flex;
      align-items: center;
      color: #ffffff;
      font-size: 0.73vw;
      margin-left: 2.1vw;

      img {
        width: 0.94vw;
        height: 1.1vw;
        margin-right: 0.5vw;
      }

      .line {
        width: 0.94vw;
        margin-right: 0.47vw;
        border-top: 1px dashed #00fcf9;
      }
    }
  }

  .modalclose {
    width: 1.1vw;
    height: 1.1vw;
    position: absolute;
    top: 1.67vw;
    right: 2.24vw;
    cursor: pointer;
  }

  .datebox {
    cursor: pointer;
    height: 2.1vw;
    line-height: 2.1vw;
    text-align: center;
    position: absolute;
    top: 4.8vw;
    right: 2.22vw;
    color: #ffffff;
    font-size: 0.83vw;
    display: flex;
    align-items: center;

    .ditem {
      width: 5.94vw;
      border: 1px solid #39fffb;
    }

    .ditem.choose {
      background: #4cfff5;
      color: #050b28;
    }
  }
}
</style>
